import React, { useEffect, useState } from 'react'
import { Col, Row, Input, Select,Button } from 'antd';
import request from "../../untils/request"
import "../../api/tage"
import { useDispatch } from 'react-redux';
import { ADDWORD } from "../../type/store.d"
import { useNavigate } from 'react-router-dom';
// 输入框、
const { TextArea } = Input;

interface tagType {
  id: string;
  lable: string;
}
export default function Write() {
  const dispatch = useDispatch()
  const navigate=useNavigate()
  // xuan2
  const [tagList, setList] = useState<Array<tagType>>([])

  const [title, setTitle] = useState("")
  const [word, setWord] = useState("")
  const [choseTagList, setChoseTagList] = useState<Array<string>>([])
  // 选择器
  const { Option } = Select;
  const handleChange = (value: string[]) => {
    console.log(`selected ${value}`);
    setChoseTagList(value)
  };
  // 渲染
  useEffect(() => {
    request.get("/api/tagList").then(res => {
      console.log(res.data.list, 222);
      setList(res.data.list)
    })
  }, [])

  const handleChangeInput = (e: string, type: string) => {
    if (type == "title") {
      setTitle(e)
    } else {
      setWord(e)
    }
  }
  // 发布
  const submitWord = () => {
    let data = {
      id: new Date().getTime(),
      title: title,
      wrod: word,
      comments: 0,
      isComments: false,
      commentsList: [],
      tag: choseTagList
      
    }
    dispatch({
      type: ADDWORD,
      payload:data
    })
    navigate("/index/shou")
  }
  return (
    <div>
      <Row>
        <Col span={12} offset={6}>
          <Input placeholder="请输入文章标题" onChange={(e) => handleChangeInput(e.target.value, "title")} value={title} />
          <TextArea placeholder="请输入文章标题" onChange={(e) => handleChangeInput(e.target.value, "word")} maxLength={500} value={word} />
          <Select
            mode="multiple"
            style={{ width: '100%' }}
            placeholder="请选择文章归属标签"
            defaultValue={[]}
            onChange={handleChange}
            optionLabelProp="label"
          >
            {
              tagList && tagList.map((item, index) => {
                return (
                  <Option value={item.lable} label={item.lable} key={index}>
                    <div className="demo-option-label-item">
                      {item.lable}
                    </div>
                  </Option>
                )
              })
            }
          </Select>
          <Button type="primary" onClick={()=>submitWord()}>
            发布文章
          </Button>
        </Col>
      </Row>

    </div>
  )
}
